<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel>
      <template #toolLeft>
        <l-query2
          :labelWidth="0"
          :popoverWidth="240"
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #isDelete>
            <el-radio-group v-model="queryData.isDelete" size="mini" @change="handleSearch">
              <el-radio-button label="0">站内消息</el-radio-button>
              <el-radio-button label="1">回收站</el-radio-button>
            </el-radio-group>
          </template>
          <template #keyword>
            <el-input v-model="queryData.keyword" :placeholder="$t('请输入查询关键字')"></el-input>
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns :hasAdd="false">
          <el-button-group>
            <el-button type="danger" size="mini" @click="handleDelete()">{{ deleteBtnText }}</el-button>
          </el-button-group>
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        rowKey="f_MsgId"
        :loading="tableLoading"
        :columns="columns"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        isMultiSelect
        @loadPageData="turnTablePage"
      >
        <template v-slot:f_Content="scope">
          <el-button @click="handleLook(scope.row)" size="mini" type="text">{{ scope.row.f_Content }}</el-button>
        </template>
        <template v-slot:f_IsRead="scope">
          <el-tag v-if="scope.row.f_IsRead == 1" size="mini" type="success">已读</el-tag>
          <el-tag v-else size="mini" type="warning ">未读</el-tag>
        </template>
        <template v-slot:f_CreateDate="scope">
          {{ lr_dateFormat(scope.row.f_CreateDate) }}
        </template>
        <template v-slot:f_SendUserId="scope">
          {{ getName(scope.row.f_SendUserId) }}
        </template>
      </l-table>
    </l-panel>
    <component v-if="sysMessagereadly" ref="messageBox" :is="sysMessageComponent"></component>
  </l-layout>
</template>

<script>
const api = window.$api.message.msg;
const apiUser = window.$api.message.user;
export default {
  data() {
    return {
      lr_isPage: true,

      queryItems: [
        { prop: "isDelete", span: 24 },
        { prop: "keyword", span: 24 },
      ],
      queryData: {
        isDelete: "0",
        keyword: "",
      },
      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "内容", prop: "f_Content", minWidth: 120, align: "left" },
        { label: "消息类型", prop: "f_SendUserId", width: 120, align: "left" },
        { label: "状态", prop: "f_IsRead", width: 64, align: "center" },
        { label: "时间", prop: "f_CreateDate", width: 160, align: "left" },
      ],

      sysUserList: [],

      sysMessagereadly: false,
      sysMessageComponent: "",
    };
  },
  computed: {
    deleteBtnText() {
      if (this.queryData.isDelete == "0") {
        return "删除";
      } else {
        return "彻底删除";
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadSysUsers();
      this.loadTableData();
    },
    async loadSysUsers() {
      this.sysUserList = await this.$awaitWraper(apiUser.getList());
    },
    getName(code) {
      const sysUser = this.sysUserList.find((t) => t.f_Code == code);
      if (sysUser) {
        return sysUser.f_Name;
      }
      return "";
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      const queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_IsRead,F_CreateDate DESC";

      const data = await this.$awaitWraper(api.getSysPage(queryData));

      //console.log(data)

      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
    handleLook(row) {
      //console.log(row, "row");

      this.sysMessagereadly = false;
      const sysuser = this.sysUserList.find((t) => t.f_Code == row.f_SendUserId);
      if (sysuser.f_Url) {
        this.sysMessageComponent = sysuser.f_Url;
        this.sysMessagereadly = true;
        this.openMessageBox(row, 0);
      }
      row.f_IsRead = 1;
      const api = window.$api.message.msg;
      api.read(row.f_MsgId);
    },
    openMessageBox(item, num) {
      if (this.$refs.messageBox) {
        this.$nextTick(async () => {
          this.$refs.messageBox.open(item);
        });
      } else if (num < 100) {
        setTimeout(async () => {
          num++;
          this.openMessageBox(item, num);
        }, 100);
      }
    },

    handleDelete() {
      const selectedData = this.$refs.mainTable.getSelected();
      if (selectedData.length == 0) {
        this.$message({
          type: "warning",
          message: `请选择数据！`,
        });
        return;
      }

      const ids = String(selectedData.map((t) => t.f_MsgId));

      this.$confirm(`是否${this.deleteBtnText}数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.queryData.isDelete == "0") {
            api.virtualDelete(ids).then(() => {
              this.$refs.mainTable.reset();
              this.$message({
                type: "success",
                message: `${this.deleteBtnText}成功!`,
              });
              this.loadTableData(true);
            });
          } else {
            api.remove(ids).then(() => {
              this.$refs.mainTable.reset();
              this.$message({
                type: "success",
                message: `${this.deleteBtnText}成功!`,
              });
              this.loadTableData(true);
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${this.deleteBtnText}`,
          });
        });
    },
  },
};
</script>
